<template>
    <div class="host-body">
        <!-- 标题 -->
        <div class="d-flex jc-center">
            <dv-decoration-10 class="dv-dec-10" />
            <div class="d-flex jc-center">
                <dv-decoration8 class="dv-dec-8" />
                <div class="title">
                    <span class="title-text">大数据可视化平台</span>
                    <dv-decoration6 class="dv-dec-6" :reverse="true" :color="['#50e3c2', '#67a1e5']"/>
                </div>
                <dv-decoration8 class="dv-dec-8" :reverse="true"/>
            </div>
            <dv-decoration-10 class="dv-dec-10-s" />
        </div>

        <!-- 图表数据分析按钮-WebGIS(ThreeJS&OpenLays)按钮-日期时间 -->
        <div class="d-flex jc-between px-2">
            <div class="d-flex aside-width">

                <div class="react-left react-l-s">
                    <span class="react-left"></span>
                    <span class="text">数据分析</span>
                </div>
                <div class="react-left bg-color-blue">
                    <span class="text fw-b">Big-Screen</span>
                </div>

            </div>
            <div class="d-flex aside-width">

                <div class="react-right bg-color-blue">
                    <span class="text fw-b">Web-GIS</span>
                </div>
                <div class="react-right react-l-s">
                    <span class="react-after"></span>
                    <span class="text">{{ currentTime }}</span>
                </div>

            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue';

const currentTime = ref('');
  
const updateTime = () => {
    const now = new Date();
    const options = { 
        year: 'numeric', 
        month: '2-digit', 
        day: '2-digit', 
        hour: '2-digit', 
        minute: '2-digit', 
        second: '2-digit',
        hour12: false
    };
    currentTime.value = now.toLocaleDateString('zh-CN', options).replace(/\//g, '-');
};
  
let timer;
onMounted(() => {
    updateTime();
    timer = setInterval(updateTime, 1000);
});
  
onBeforeUnmount(() => {
    clearInterval(timer);
});
</script>

<style lang="scss" scoped>
.host-body {
    margin-bottom: 10px;
    .d-flex {
        display: flex;
    }
    .jc-center {
        justify-content: center;
    }
    .jc-between {
        justify-content: space-between;
    }
    .px-2 {
        padding-left: 12px;
        padding-right: 12px;
    }
    .dv-dec-10,
    .dv-dec-10-s {
        width: 26.3%;
        height: 5px;
    }
    .dv-dec-10-s {
        transform: rotateY(180deg); // 水平翻转元素
    }
    .dv-dec-8 {
        width: 200px;
        height: 50px;
    }
    .title {
        position: relative;
        width: 500px;
        text-align: center;
        background-size: cover;
        background-repeat: no-repeat;

        .title-text {
            color: #00f2fe;
            text-shadow: 0 0 10px rgba(0, 242, 254, 0.5);
            margin: 0;
            font-size: 24px;
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translate(-50%);
        }

        .dv-dec-6 {
            position: absolute;
            left: 50%;
            width: 250px;
            height: 8px;
            transform: translate(-50%);
        }
    }
    .aside-width {
        width: 38%;
    }
    .react-l-s {
        background-color: #0f1325;
    }
    .bg-color-blue {
        background-color: #1c4bff;
    }
    .text {
        color: #c3cbde;
    }
    .fw-b {
        font-weight: bold;
    }
    .react-right {
        &.react-l-s {
            text-align: right;
            width: 500px;
        }
        font-size: 18px;
        width: 300px;
        line-height: 50px;
        text-align: center;
        transform: skewX(-45deg);
        margin-right: 0.75rem;

        .react-after {
            position: absolute;
            right: -25px;
            top: 0;
            height: 50px;
            width: 50px;
            background-color: #0f1325;
            transform: skewX(45deg);
        }

        .text {
            display: inline-block;
            transform: skewX(45deg);
        }
    }
    .react-left {
        &.react-l-s {
            width: 500px;
            text-align: left;
        }
        font-size: 18px;
        width: 300px;
        // height: 50px;
        line-height: 50px;
        text-align: center;
        transform: skewX(45deg);
        margin-left: 0.75rem;

        .react-left {
            position: absolute;
            // left: -25px;
            left: -37px;
            top: 0;
            height: 50px;
            width: 50px;
            background-color: #0f1325;
            transform: skewX(-45deg);
        }

        .text {
            display: inline-block;
            transform: skewX(-45deg);
        }
    }
}
</style>